<template>
    <div>
        <el-card ref="cardHeigh">
            <el-form :inline="true" :model="formInline" class="form-inline">
                <el-form-item label="一级分类" prop="category1">
                    <el-select v-model="formInline.category1" placeholder="请选择" clearable @change="category1Change"
                        :disabled="scencee === undefined ? false : !scencee">
                        <el-option v-for="item in category1" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" prop="category2">
                    <el-select v-model="formInline.category2" placeholder="请选择" clearable @change="category2Change"
                        :disabled="scencee === undefined ? false : !scencee">
                        <el-option v-for="item in category2" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类" prop="category3">
                    <el-select v-model="formInline.category3" placeholder="请选择" clearable @change="category3Change"
                        :disabled="scencee === undefined ? false : !scencee">
                        <el-option v-for="item in category3" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onReset">清空</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang='ts' name="CategorySelect">
import { getCategory1, getCategory2, getCategory3 } from '@/api/product/attr';
import type { Category } from "@/api/product/attr/type"
import type { ResponseData } from "@/api/type"
import { ElMessage } from 'element-plus';

const props = defineProps(['formInline', 'getData', 'scencee']);
// 使用解构赋值减少冗余
const { formInline, getData } = props;
const scencee = toRef(props, 'scencee')

// 添加错误处理机制
if (!formInline || typeof getData !== 'function') {
    console.error('props传入不正确: formInline 或 getData 必须存在并且 getData 必须是一个函数');
}

let category1 = ref<Category[]>([])
let category2 = ref<Category[]>([])
let category3 = ref<Category[]>([])
const onReset = () => {
    if (scencee.value === undefined ? false : !scencee.value) {
        return
    }
    //清空选择器的值 
    Object.assign(formInline, {
        category1: undefined,
        category2: undefined,
        category3: undefined
    })
}

const cardHeigh = ref();
onMounted(() => {
    document.documentElement.style.setProperty('--card-height', `${cardHeigh.value.$el.clientHeight}px`);
    reqCategory1()
})
const reqCategory1 = () => {
    getCategory1().then((result: ResponseData<Category[]>) => {
        category1.value = result.data
    }).catch((error: ResponseData<String>) => {
        ElMessage.error('获取一级分类失败' + error.message);
    })
}
const reqCategory2 = () => {
    if (!formInline.category1) {
        return
    }

    getCategory2(formInline.category1).then((result: ResponseData<Category[]>) => {
        category2.value = result.data
    }).catch((error: ResponseData<String>) => {
        ElMessage.error('获取二级分类失败' + error.message);
    })
}
const reqCategory3 = () => {
    if (!formInline.category2) {
        return
    }

    getCategory3(formInline.category2).then((result: ResponseData<Category[]>) => {
        category3.value = result.data
    }).catch((error: ResponseData<String>) => {
        ElMessage.error('获取三级级分类失败' + error.message);
    })
}

const category1Change = (value: number) => {
    formInline.category2 = undefined;
    formInline.category3 = undefined;
    category2.value = [];
    category3.value = [];
    if (!value) {
        return
    }
    if (!formInline.category1) {
        ElMessage.error('请选择一级分类')
        return
    }
    reqCategory2()
}

const category2Change = (value: number) => {
    formInline.category3 = undefined;
    category3.value = [];
    if (!value) {
        return
    }
    if (!formInline.category2) {
        ElMessage.error('请选择二级分类')
        return
    }
    reqCategory3()
}

const category3Change = (value: number) => {
    if (!value) {
        return
    }

    getData();
}



</script>

<style scoped lang='scss'>
.form-inline .el-input {
    --el-input-width: 220px;
}

.form-inline .el-select {
    --el-select-width: 220px;
}
</style>